{% extends "generalTemplate.html" %}
{% block pageName %}Test page{% endblock %}

{% block queryScript %}
<link type="text/css" rel="stylesheet" href="/bvapp/static/css/bvapp.css"/>
<script type="text/javascript" src="/static/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.jeditable.mini.js"></script>

<script type="text/javascript">



    function makeElementEditable(el) {
        el.editable("/echo/", {
            indicator: "Saving...",
            style: "inherit",
            callback: function(settings, original) {
                $("input.add_editable").removeAttr("disabled");
            }
        });
    }
    jQuery(document).ready(function () {

        makeElementEditable($("p.editable"));
        
        jQuery($("input.add_editable").click(function() {
            var lastEditableDiv = $("div.editable p.editable:last");
            $("div.editable").append($('<p class="editable"></p>'));
            $(this).attr({"disabled": "disabled"});
            makeElementEditable(lastEditableDiv);
            lastEditableDiv.click();
        }))
    });
</script>
{% endblock %}

{% block container %}
<div id="something">
    <div style="margin: 3em" class="editable">
        <p class="editable">foo</p>

        <p class="editable">bar</p>
    </div>
    <input type="button" value="+" class="add_editable">
</div>
{% endblock %}